<template>
  <div>
    <t-card :bordered="false">
      <t-descriptions :title="t('pages.detailBase.baseInfo.title')">
        <t-descriptions-item v-for="(item, index) in ORDER_INFO_DATA" :key="index" :label="item.name" >
          <template v-if="item.name === t('components.ordersTable.orderStatus')" >
            <t-tag v-if="item.value === '3'" theme="success" variant="light" style="margin-left: -100px;">
              {{ $t('components.ordersTable.orderStatusEnum.finish') }}
            </t-tag>
            <t-tag v-if="item.value === '0'" theme="warning" variant="light" style="margin-left: -100px;">
              {{ $t('components.ordersTable.orderStatusEnum.unpaid') }}
            </t-tag>
            <t-tag v-if="item.value === '1'" theme="primary" variant="light" style="margin-left: -100px;">
              {{ $t('components.ordersTable.orderStatusEnum.paid') }}
            </t-tag>
            <t-tag v-if="item.value === '2'" theme="default" variant="light" style="margin-left: -100px;">
              {{ $t('components.ordersTable.orderStatusEnum.cancelled') }}
            </t-tag>
          </template>
          <template v-else>
    <span style="margin-left: -100px;">
      {{ item.value }}
    </span>
          </template>
        </t-descriptions-item>
      </t-descriptions>
      <template class="order-btn">
        <t-button theme="primary" @click="visibleModelessDrag = true" > 评价</t-button>
        <t-button theme="warning" @click="visibleRefund = true" > 退款</t-button>
      </template>
    </t-card>

<!--    <t-card :title="t('pages.detailBase.changelog.title')" class="container-base-margin-top" :bordered="false">-->
<!--      <t-steps class="detail-base-info-steps" layout="vertical" theme="dot" :current="1">-->
<!--        <t-step-item-->
<!--          :title="t('pages.detailBase.changelog.step1.title')"-->
<!--          :content="t('pages.detailBase.changelog.step1.subtitle')"-->
<!--        />-->
<!--        <t-step-item-->
<!--          :title="t('pages.detailBase.changelog.step2.title')"-->
<!--          :content="t('pages.detailBase.changelog.step2.subtitle')"-->
<!--        />-->
<!--        <t-step-item-->
<!--          :title="t('pages.detailBase.changelog.step3.title')"-->
<!--          :content="t('pages.detailBase.changelog.step3.desc')"-->
<!--        />-->
<!--      </t-steps>-->
<!--    </t-card>-->

  </div>
  <t-dialog
    v-model:visible="visibleModelessDrag"
    header="评价"
    mode="modeless"
    draggable
    :on-confirm="submitEvaluation">

    <template #body>
      <t-textarea  size="large" v-model="replyData"/>
    </template>
  </t-dialog>
  <t-dialog
    v-model:visible="visibleRefund"
    theme="warning"
    header="温馨提示"
    body="亲亲，确认要退款吗？"
    :on-close="closeRefund"
    :cancel-btn="null"
    @confirm="userRefund"
  />
<!--  <div>-->
<!--    <template>-->
<!--      <t-comment avatar="https://tdesign.gtimg.com/site/avatar.jpg">-->
<!--        <template #content>-->
<!--          <div class="form-container">-->
<!--            <t-textarea v-model="replyData" placeholder="请输入内容" />-->
<!--            <t-button class="form-submit" @click="submitReply">回复</t-button>-->
<!--          </div>-->
<!--        </template>-->
<!--      </t-comment>-->
<!--    </template>-->
<!--  </div>-->
</template>

<script lang="ts">


export default {
  name: 'DetailBase',
};
</script>

<script setup lang="ts">
import {USER_LIST} from '@/pages/user/constants';
import { t } from '@/locales';
import router from "@/router";
import {onMounted, ref} from "vue";
import {NotifyPlugin} from "tdesign-vue-next";
import {useRoute} from "vue-router";
import axios from "axios";
const route = useRoute();
const replyData = ref('');
const visibleModelessDrag = ref(false);
const visibleRefund= ref(false);
const submitEvaluation = async () => {
  try {
    const response = await axios.post('/api/user/userComment', {
      Comment: replyData.value,
      Orderid: parseInt(route.query.id as string),
    });
    if (response.data.success) {
      NotifyPlugin.success({
        title: '成功',
        content: '评价提交成功',
        duration: 3000,
      });
      visibleModelessDrag.value = false;
    } else {
      NotifyPlugin.error({
        title: '失败',
        content: '评价提交失败，请重试',
        duration: 3000,
      });
    }
  } catch (error) {
    NotifyPlugin.error({
      title: '错误',
      content: '提交评价时发生错误，请稍后再试',
      duration: 3000,
    });
  }
};
onMounted(() => {
  console.log(route.query.id);
});
// const submitReply = () => {
//   NotifyPlugin.info({
//     title: '回复内容',
//     content: replyData.value,
//     duration: 3000,
//   });
// };
const closeRefund = () => {
  visibleRefund.value = false;
};

const userRefund = async () => {
  try {
    const response = await axios.get('/api/user/userRefund', {
      params: {
        orderid: parseInt(route.query.id as string),
      },
    });
    if (response.data.success) {
      NotifyPlugin.success({
        title: '成功',
        content: '退款申请成功',
        duration: 3000,
      });
      visibleRefund.value = false;
    } else {
      NotifyPlugin.error({
        title: '失败',
        content: '您当前的订单状态有误，无法退款，若您确认状态无误，请重试',
        duration: 3000,
      });
    }
  } catch (error) {
    NotifyPlugin.error({
      title: '错误',
      content: '提交退款申请时发生错误，请稍后再试',
      duration: 3000,
    });
  }
  visibleRefund.value = false;
};
const ORDER_INFO_DATA = [
  {
    name: t('components.ordersTable.orderName'),
    value: route.query.name,
  },
  {
    name: t('components.ordersTable.orderStatus'),
    value: route.query.status,
  },
  {
    name: t('components.ordersTable.goodsNum'),
    value: route.query.num,
  },
  {
    name: t('components.ordersTable.createdDate'),
    value: route.query.date,
  },
  {
    name: t('components.ordersTable.orderID'),
    value: route.query.id,
  },
  {
    name: t('components.ordersTable.orderAmount'),
    value: route.query.amount,
  }
];


</script>

<style lang="less" scoped>
.form-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  .form-submit {
    margin-top: 8px;
  }
}
.order-btn {
  display: flex;
  justify-content: flex-end;
}
@import './index.less';
</style>
